<template>
  <div class="_box-wrapper" :class="{ _mobile: props.isMobile }">
    <template v-if="loading">
      <div class="flex items-center justify-center h-full">
        <loading-com class="!w-2.5rem" :track-width="6" />
      </div>
    </template>
    <template v-else>
      <div class="_battle-scroll-warpper">
        <img class="_arrow _arrow-left" :src="BoxArrow" />
        <img class="_arrow _arrow-right" :src="BoxArrow" />
        <div class="_scroll-item" v-for="item in users" :key="item.user_id">
          <battle-scroll-item
            ref="battleRef"
            :user-id="item.user_id"
            :is-mobile="props.isMobile"
            :user-num="users.length"
            @end="onEnd"
            @tick="onTick"
          />
          <img class="_battle-icon" :src="BattleActive" />
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="tsx" setup>
import BattleActive from "@/assets/battle-active.png";
import BoxArrow from "@/assets/box-active-arrow.png";
import LoadingCom from "@/components/Loading/loading.vue";
import { BattleDetailStatus } from "@/enum/battle";
import { useBasic } from "@/store/basic";

import type { BattleScrollExpose } from "./battleScroll";
import { battleScrollEmits, battleScrollProps } from "./battleScroll";
import type { BattleScrollItemInstance } from "./BattleScrollItem/battleScrollItem";
import BattleScrollItem from "./BattleScrollItem/battleScrollItem.vue";

const props = defineProps(battleScrollProps);
const emits = defineEmits(battleScrollEmits);

const basic = useBasic();

const loading = ref(true);
const users = ref<API.Battles.BattleUserItem[]>([]);
const battleRef = ref<BattleScrollItemInstance[]>([]);
const endUserId = ref<Record<number, boolean>>({});
const tickIndex = ref<Record<number, number | undefined>>({});

function onEnd(userId: number) {
  endUserId.value[userId] = true;
}

async function onTick(idx: number) {
  if (tickIndex.value[idx] === void 0) {
    basic.audio.ticksPlay();
  }

  await new Promise((resolve) => setTimeout(resolve, 70));
  tickIndex.value[idx] = void 0;
}

watchEffect(async () => {
  if (
    Object.keys(endUserId.value).length === users.value.length &&
    users.value.length > 0
  ) {
    endUserId.value = {};
    basic.audio.losePlay();
    await new Promise((resolve) => setTimeout(resolve, 500));
    emits("end");
  }
});

defineExpose<BattleScrollExpose>({
  start: async (battleInfo) => {
    endUserId.value = {};
    tickIndex.value = {};
    loading.value = battleInfo.status === BattleDetailStatus.BattleLoading;
    users.value = battleInfo.user_list || [];
    if (battleInfo.spin_list.length !== 0) {
      await nextTick();
      const spinListMap = battleInfo.spin_list.reduce((map, item) => {
        return {
          ...map,
          [item.user_id]: item,
        };
      }, {} as Record<string, API.Battles.BattleSpinItem>);

      // 处理对应的滚动
      for (const itemRef of battleRef.value) {
        itemRef?.start?.(spinListMap[itemRef?.getUserId()] || void 0);
      }
    }
  },
});
</script>

<style lang="less" scoped>
._box-wrapper {
  width: 100%;
  aspect-ratio: 78 / 30.44;
  min-height: 0;
  background: #1a1b1c;
  border-radius: var(--el-border-radius-base);
  border: 0.06rem solid #464a4b;
  overflow: hidden;
  ._battle-scroll-warpper {
    @apply relative flex items-stretch h-full w-full;
    gap: 3.19rem;
    ._arrow {
      @apply absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 1.13rem;
      object-fit: contain;
      &._arrow-left {
        left: 0.69rem;
        transform: rotate(-90deg);
      }
      &._arrow-right {
        right: 0.69rem;
        transform: rotate(90deg);
      }
    }

    ._scroll-item {
      @apply relative flex items-center justify-center flex-1 w-0;
      ._battle-icon,
      &:after {
        @apply absolute top-0 bottom-0;
        right: calc(0rem - (3.19rem / 2));
      }

      &:after {
        width: 0.06rem;
        background: linear-gradient(
          to bottom,
          #1a1b1c 10%,
          #575454 50%,
          #1a1b1c 90%
        );
        content: "";
      }

      ._battle-icon {
        z-index: 1;
        top: 50%;
        width: 1.06rem;
        height: 1.06rem;
        object-fit: contain;
        transform: translate(50%, -50%);
        background-color: #1a1b1c;
      }

      &:last-child {
        ._battle-icon,
        &:after {
          display: none;
        }
      }
    }
  }

  &._two-person {
    width: 43.75rem;
    aspect-ratio: 43.75 / 30.44;
  }

  &._three-person {
    width: 62.5rem;
    aspect-ratio: 62.5 / 30.44;
  }

  &._mobile {
    aspect-ratio: unset;
    height: 100%;
    ._battle-scroll-warpper {
      padding: 0 0.88rem;
      height: 100%;
      gap: 1.63rem;
      ._arrow {
        width: 0.88rem;
        &._arrow-left {
          left: 0;
        }
        &._arrow-right {
          right: 0;
        }
      }

      ._scroll-item {
        @apply relative flex items-center justify-center flex-1 w-0;
        height: 100%;
        ._battle-icon,
        &:after {
          @apply absolute top-0 bottom-0;
          right: -0.851rem;
        }

        ._battle-icon {
          width: 0.69rem;
          z-index: 1;
          top: 50%;
          object-fit: contain;
          transform: translate(50%, -50%);
          background-color: #1a1b1c;
        }
      }
    }

    &._four-person {
      ._battle-scroll-warpper {
        ._scroll-item {
          &:nth-child(2n + 1) {
            ._battle-icon,
            &:after {
              display: none;
            }
          }
        }
      }
    }

    &._two-person {
      width: 100%;
    }

    &._three-person {
      width: 100%;
    }
  }
}
</style>
